<template>
  <div>
    <el-cascader clearable :multiple="multiple" filterable :show-all-levels="false" :props="cascaderProps" :placeholder="placeholder" :options="options" v-model="localEmployee" @change="selectOption" style=" width: 100%; display: inline-block;"></el-cascader>
  </div>
</template>

<script>
import { queryDeptMsg, queryUserMsg } from '@/api/communityOperating/personalSop'

export default {
  name: 'StaffCascader',
  props: {
    placeholder: String,
    multiple: {
      type: Boolean,
      default: true,
    },
    employee: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      options: [],
      // employee: [],
      localEmployee: this.employee,
      cascaderProps: {
        lazy: true,
        lazyLoad: (node, resolve) => {
          this.loadOptions(node, resolve)
        },
      },
    }
  },
  watch: {
    employee(newValue) {
      this.localEmployee = newValue; // 监听props的变化，更新子组件内部的数据
    }
  },
  mounted() {
    this.handleQueryDeptMsg()
  },

  methods: {
    // 查询添加员工的信息
    handleQueryDeptMsg() {
      this.options = []
      queryDeptMsg().then((res) => {
        if (res.code === 200 && res.data.length) {
          res.data.forEach((item) => {
            this.options.push({
              id: item.deptId,
              value: item.deptId,
              label: item.deptName,
              children: null,
            })
          })
        }
      })
    },
    // 查询执行员工
    // queryDeptMsg() {
    //   let obj = {
    //     name: "",
    //     deptId: null,
    //     authFlag: "Y",
    //   };
    //   permission(obj).then((res) => {
    //     if (res.code === 200 && res.data.length) {
    //       res.data.forEach((item) => {
    //         this.options.push({
    //           id: item.userId,
    //           value: item.userId,
    //           label: item.userName,
    //           // children: [],
    //         });
    //       });
    //     }
    //   });
    // },
    // 懒加载 执行员工,创建人
    loadOptions(parentNode, resolve) {
      let nodes = []
      queryUserMsg({ deptId: parentNode.value }).then((res) => {
        if (res.code === 200) {
          if (res.data.length) {
            res.data.forEach((item) => {
              nodes.push({
                value: item.userId,
                label: item.userName,
                children: null,
                leaf: 1,
              })
            })
          } else {
            nodes = []
          }
          resolve(nodes)
        }
      })
    },
    selectOption(select) {
      this.$emit("update:employee", select);
    },
  },
}
</script>

<style lang="scss" scoped></style>
